<template>

    <div>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item prop="email">
                <el-input v-model="ruleForm.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item prop="emailCode">
                <el-input v-model="ruleForm.emailCode" style="width: 55%;margin-right: 10px;" placeholder="请输入验证码" />
                <el-button type="primary" @click="yxyzm">邮箱验证码</el-button>
            </el-form-item>

            <el-form-item prop="password">
                <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password" />
            </el-form-item>
            <el-form-item prop="repassword">
                <el-input v-model="ruleForm.repassword" placeholder="请输入确认密码" type="password" />
            </el-form-item>
            <el-form-item prop="checkCode">
                <el-input v-model="ruleForm.checkCode" style="width: 55%;margin-right: 10px;" placeholder="请输入验证码" />
                <img :src="src" alt="" style="display: inline-block;cursor:pointer" @click="getsrc">
            </el-form-item>

        </el-form>
    </div>

</template>
<script setup>
import { onMounted, ref } from 'vue';
const ruleForm = ref({})
const ruleFormRef = ref(null)
const rules = {
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        {
            validator: function (rule, value, callback) {
                const reg = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}$/;
                if (!reg.test(value)) {
                    callback(new Error('请输入有效的邮箱地址'));
                } else {
                    callback();
                }
            },
            trigger: 'blur',
        },
    ],
    emailCode: [
        { required: true, message: '请输入邮箱验证码', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    repassword: [
        { required: true, message: '请输入确认密码', trigger: 'blur' },
    ],
    checkCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' },

    ]
}
const emit = defineEmits(["opendialog"])
const remember = ref(false);
const yxyzm = () => {
    ruleFormRef.value.validateField("email", (valid, fields) => {
        if (valid) {
            let data = {
                email: ruleForm.value.email,
                type: 1,
                sendtype: 1
            }
            // this.$emit('message', 'Hello from child!');
            emit("opendialog", data);
        }

    })

}
const src = ref("");
onMounted(() => {
    getsrc()
})
const getsrc = () => {
    src.value = "/api/checkCode?&&time=" + new Date();
}
const validate = () => {
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            emit("resetpwd", ruleForm.value)
        }
    })
}
defineExpose({
    validate
})
</script>